<template>
  <!-- banner -->
  <div class="banner">
    <!-- swiper -->
    <div class="swiper">
      <!-- ============================= 轮播图 Start =================================== -->
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="javascript:;">
            <img
              src="http://cba.itlike.com/public/uploads/10001/20230320/6d239000de9c3f12aafa571349b63d22.jpg"
              alt=""
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="javascript:;">
            <img
              src="http://cba.itlike.com/public/uploads/10001/20230320/5901a2e13e1075882950af75c98d0007.jpg"
              alt=""
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="javascript:;">
            <img
              src="http://cba.itlike.com/public/uploads/10001/20230320/7143e84bf3dd41fa67b9675a9e5d81a3.jpg"
              alt=""
            />
          </a>
        </div>
      </div>
      <!-- ============================= 轮播图 End =================================== -->

      <!--分页器-->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.banner {
  position: relative;
}
.banner .swiper {
  width: 100vw;
  overflow: hidden;
  height: 49.0667vw;
}
.banner .swiper .swiper-wrapper img {
  height: 100%;
}
.banner .swiper .swiper-pagination-bullets .swiper-pagination-bullet {
  border-radius: 1.6vw;
  opacity: 1;
  width: 1.6vw;
  height: 1.6vw;
  background-color: #fff;
}
.banner .swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
  width: 2.9333vw;
  height: 1.3333vw;
  background-color: #8ed6ee;
}
</style>
